<template>
	<view class="uni_box home">
		<navbar title='开通会员'>
		</navbar>
		<view class="content">
			<view class="vipone">
				<image class="viphead" src="/static/img/viphead.png"></image>
				<view class="viponeitem">
				 <image class="img_wg" src="/static/img/img_wg.png"></image>
				  <view class="shione">
					<image class="icon_hy" :src="info.avatar?info.avatar:'/static/mine/tous.png'"></image>
					<text class="hname">{{info.nickname}}</text>
				  </view>	
				  <text class="daoqi" v-if="info.vip==1">会员到期时间：{{info.endtime}}</text>
				</view>
			</view>
			<view class="viptwo">
				<text class="vname">会员套餐</text>
				<view class="vlist">
					<scroll-view scroll-x class="vitem">
						<!-- <view class="items active">
							<image class="vipbg" src="/static/img/vipbg.png"></image>
							<view class="itemview">
								
								<image class="icon_vip" src="/static/img/icon_vip.png"></image>
								<text class="huiname">月会员</text>
								<text class="jia">￥<text class="jianum">99</text></text>
								<text class="yuan">￥199</text>
							</view>
						</view> -->
						<view class="items " :class="vipindex.id == item.id?'active':''" v-for="(item,index) in package_user" :key="index" @click="vipClick(item)">
							<image class="vipbg" src="/static/img/vipbg.png"></image>
							<view class="itemview">
								<image class="icon_vip" :src="item.image!=''?item.image:'/static/img/img_plus.png'"></image>
								<text class="huiname">{{item.title}}</text>
								<text class="jia">￥<text class="jianum">{{item.price}}</text></text>
								<text class="yuan">￥{{ item.oprice }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="vipthree">
				<view class="vhead">
					<view class="shu"></view>
					<text class="quanyi">会员权益</text>
				</view>
			</view>

			<view class="hlist" v-if="content">
				<!-- <view class="hitem" v-for="(item,index) in vipindex.equity" :key="index" @click="navClick(item)">
					<image class="hicon" :src="item.equity.thumbnail"></image>
					<text>{{item.equity.name}}</text>
				</view> -->
				<u-parse :html="content"></u-parse>
				<!-- <view v-html="viptxt"></view> -->
			</view>
			<view class="botview">
				<view class="botbtn" @click="getxiadan">
				  <text class="zhi">立即支付 ￥<text class="zhinum">{{ vipindex.price }}</text>/月</text>
				</view>
				<text class="goutit">购买即视为同意 <text class="goumiao" @click="getvipxieyi">《VIP会员用户协议》</text> </text>
			</view>
			
		</view>


		<!-- 底部支付 -->
		<view class="qie">
			<u-popup v-model="zshow" mode="bottom" :closeable="false">
				<view class="qviews">
					<view class="qbiao">
						<text class="taotit">支付</text>
						<text class="rjia">¥{{ vipindex.price }}</text>
					</view>
					<view class="zhilist">
						<view class="zhiitem" v-for="(item,index) in paylist" :key="index" :class="paytype.type == item.type ? 'zactive' : ''" @click="getzhipay(item)">
							<image class="zicon" :src="item.image?item.image:'/static/mine/zhifubao.png'" />
							<text class="ztit">{{item.name}}</text>
							<image class="gous" src="/static/mine/gous.png" />
							<image class="gou" src="/static/mine/gou.png" />
						</view>
					</view>
					<view class="zhibtn">
						<view class="zhileft" @click="zshow = false">取消</view>
						<view class="zhiright" @click="goumaibtn">确定</view>
					</view>
				</view>

			</u-popup>
		</view>

		<view style="display: none;width: 0;height: 0;" v-html="payForm"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hList:[
					{id:1,name:'Ai法务',img:'/static/img/icon_ai.png'},
					{id:2,name:'合同模版',img:'/static/img/icon_ht.png'},
					{id:3,name:'法律讲堂',img:'/static/img/icon_jt.png'},
					{id:4,name:'更多权益',img:'/static/img/icon_qy.png'}
				],
				info:{
					vip:0
				},
				package_user:[],
				vipindex:{},
				equitydata:[],
				content:'',
				payForm:'',
				order_id:'',
				zshow:false,
				paytype:'',
				paylist:[],
				payid:'',
				payForm:'',
				newpayinfo:{},
				viptxt:'"【太合】<text style="color:red;font-weight:bold;">鸡腿</text>皮  10kg/件 1kg*10袋"'
			}
		},
		onLoad() {
			this.getuserinfo()
			this.getviplist()
			this.getxieyi();
			this.getPayList()
		},
		onShow() {
		},
		methods: {
			async getxieyi(){
				// let codetit = ''
				// if(this.type == 'xuexi'){
				// 	codetit = 'study'
				// }
				let res = await this.$u.api.getContent({
					code:'huiyuanquanyi'
				});
				// this.title = res.title
				this.content = res.content
			},
			async getPayList(){
				let method = 'wap'
				// #ifdef APP-PLUS
				method = 'app'
				// #endif
				let res = await this.$u.api.vipgetPayList({
					mark:'recharge',
					method:method
				});
				this.paylist = res
				this.paytype = res[0]
			},
			async getuserinfo(){
				let res = await this.$u.api.usergetData({
				});
				this.info = res
			},
			async getequity(){
				let res = await this.$u.api.equity({
				});
				this.equitydata = res
				
			},
			async getviplist(){
				let res = await this.$u.api.getVipList({
				});
				this.package_user = res
				this.vipindex = this.package_user[0]
				// console.log(this.package_user)
			},
			vipClick(item){
				this.vipindex = item
			},
			async getxiadan(){
				// let res = await this.$u.api.vipaddOrder({
				// 	// type:'1',
				// 	id:this.vipindex.id
				// });
				this.zshow = true
				// this.payid = res.order_id
				// this.$u.toast("操作成功");
			},
			getvipxieyi(){
				this.navrouter("/pages_subject/twoPage/VipXieyi");
			},
			getzhipay(item){
				this.paytype = item
			},
			async goumaibtn(){
				let res = await this.$u.api.vipaddOrder({
					// type:'1',
					id:this.vipindex.id
				});
				this.payid = res.order_id
				if(this.paytype.type == 'wechat'){
					//微信
					this.getpay();
				}else if(this.paytype.type == 'alipay'){
					//支付宝
					this.getpayali();
				}else{
					this.$u.toast("暂未开通支付方式");
				}
			},
			async getpay(){
				let res = await this.$u.api.payWechatByVip({
					id:this.payid
				});
				console.log(res)
				console.log(JSON.parse(res).appid)
				let data = JSON.parse(res)
				this.newpayinfo = data
				this.zhifu()
			},
			async getpayali(){
				let method = 'wap'
				// #ifdef APP-PLUS
				method = 'app'
				// #endif
				let res = await this.$u.api.payAlipayByVip({
					id:this.payid,
					method:method
				});
				console.log(res)
				// console.log(JSON.parse(res).appid)
				// let data = JSON.parse(res)
				this.newpayinfo = res
				this.zhifu()
			},
			async zhifu() {
				// //去支付
				// let res = await this.$u.api.vippay({
				// 	type: this.paytype,
				// 	vip_id: this.vipid
				// });
				// console.log(res)
				// #ifdef H5
				// 将接口返回的form表单显示到页面
				if (this.paytype.type == 'alipay') {
					// this.zhishow = true
					console.log(this.newpayinfo)
					this.payForm = this.newpayinfo;
					this.$nextTick(() => {
					document.forms['alipay_submit'].submit();
					});
				} 
				// #endif

				// #ifdef APP-PLUS
				let payinfo = 'alipay'
				if (this.paytype.type == 'alipay') {
					payinfo = 'alipay'
				} else if (this.paytype.type == 'wechat') {
					payinfo = 'wxpay'
				}
				console.log(this.newpayinfo)
				console.log(payinfo)
				uni.requestPayment({ //拿到订单信息后 调用 uniapp的支付接口 唤起支付
					provider: payinfo, //微信就是 wxpay
					orderInfo: this.newpayinfo, //支付宝订单数据 从后端拿到的数据
					success: function (res) {
					uni.showToast({
						title: "支付成功",
						icon: 'success',
						success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 500)
						}
					})
					},
					fail: function (err) {
					uni.showToast({
						title: "支付失败请稍后再试",
						icon: 'none',
						success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 500)
						}
					})
					console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif

				},

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 200rpx;
		.vipone{
			margin: 30rpx;
			height: 200rpx;
			position: relative;
			.viphead{
				position: absolute;
				width: 100%;
				height: 100%;

			}
			.viponeitem{
				position: relative;
				padding: 30rpx 30rpx 24rpx;
				display: flex;
				height: 100%;
				flex-direction: column;
				margin-top: 60rpx;
				justify-content: center;
				.img_wg{
					position: absolute;
					width: 240rpx;
					height: 180rpx;
					right: 0;
					top: -60rpx;
				}
				.shione{
					display: flex;
					flex-direction: row;
					align-items: center;
					.icon_hy{
						margin-right: 11rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;

					}
					.hname{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}
				.daoqi{
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					display: block;
					margin-top: 20rpx;
				}
				.kai{
					margin-top: auto;
					padding: 15rpx 20rpx;
					background: rgba(255,255,255,0.3);
					border-radius: 10rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #8D6B3C;
				}
			}
		}
		.viptwo{
			padding: 20rpx 30rpx;
			.vname{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #52360F;
				display: block;
				margin-bottom: 25rpx;
			}
			.vlist{
				.vitem{
					white-space: nowrap;
					.items{
						width: 204rpx;
						height: 285rpx;
						background: #F5F5F5;
						border-radius: 20rpx;
						margin-right: 30rpx;
						display: inline-block;
						position: relative;
						.vipbg{
							position: relative;
							width: 100%;
							height: 100%;
							position: absolute;
							display: none;
						}
						.itemview{
							width: 100%;
							height: 100%;
							position: relative;
							display: flex;
							align-items: center;
							flex-direction: column;
							justify-content: center;
							// padding-top: 10rpx;
							.icon_vip{
								width: 60rpx;
								height: 60rpx;
								margin-bottom: 6rpx;
								margin-top: 8rpx;
								margin-bottom: 8rpx;
							}
							.huiname{
								font-weight: bold;
								font-size: 24rpx;
								color: #171F48;
							}
							.jia{
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #171F48;
								display: block;
								margin-top: 30rpx;
							}
							.jianum{
								font-size: 50rpx;
							}
							.yuan{
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 20rpx;
								color: #999999;
								text-decoration-line: line-through;
							}
						}
					}
					.active{
						// .itemview{
						// 	.huiname{
						// 		color: #B46D0C;
						// 	}
						// 	.jia{
						// 		color: #B46D0C;
						// 	}
						// }
						.vipbg{
							display: inline-block;
						}
					}
					
				}
			}
		}
		.vipthree{
			margin: 80rpx 30rpx 30rpx;
			.vhead{
				// width: 379rpx;
				margin: 0 auto;
				position: relative;
				display: flex;
				align-items: center;
				.shu{
					display: inline-block;
					width: 6rpx;
					height: 26rpx;
					margin-right: 13rpx;
					background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
				}
				.img_zs{
					width: 100%;
					height: 4rpx;
					position: absolute;

				}
				.quanyi{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.hlist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 30rpx 30rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				padding: 30rpx;
				.hitem{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 25%;
					margin-bottom: 44rpx;
					.hicon{
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 12rpx;
						border-radius: 50%;
					}
					text{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}
				}
			}
		.zhifu{
			height: 98rpx;
			background: linear-gradient(90deg, #F4DAB5, #E7B775);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #52360F;
		}
		.botview{
			position: fixed;
			width: 100%;
			height: 180rpx;
			background-color: #fff;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.goutit{
				font-weight: bold;
				font-size: 20rpx;
				color: #2E3243;
				display: block;
				margin-top: 20rpx;
				.goumiao{
					color: rgba(244, 58, 89, 1);
				}
			}
			.botbtn{
				height: 88rpx;
				background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 94%;
				.zhi{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				
				.zhinum{
					font-size: 50rpx;
					display: inline-block;
					margin: 0 4rpx;
					position: relative;
					top: 3rpx;
				}
			}
		}
	}

	.qie {
	/deep/.u-drawer-bottom {
		background-color: transparent;
	}

	.qielist {
		height: 90%;

		.qieitem {
			padding: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 1rpx solid #EDEDED;
		}
	}
	.qviews {
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 0rpx;
	// #ifdef APP-PLUS
	padding-bottom: 150rpx;

	// #endif
	.qbiao {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 15rpx;
		// margin-left: 30rpx;
		padding: 0 30rpx;
		// width: 100%;
	}

	.taotit {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.rjia {
		margin-left: auto;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2A7CFC;
	}

	.zhilist {
		display: flex;
		flex-direction: column;

		.zhiitem {
			padding: 20rpx;
			border-bottom: 1rpx solid #EDEDED;
			display: flex;
			flex-direction: row;
			align-items: center;

			.zicon {
				width: 78rpx;
				height: 78rpx;
				margin-right: 13rpx;
			}

			.ztit {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.gous {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: none;
			}

			.gou {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: inline-block;
			}

		}

		.zactive {
			.gous {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: inline-block;
			}

			.gou {
				margin-left: auto;
				width: 36rpx;
				height: 36rpx;
				display: none;
			}
		}
	}

	.zhibtn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 30rpx;

		.zhileft {
			width: 206rpx;
			height: 72rpx;
			border: 1px solid #CFCFCF;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin: 0 20rpx;

		}

		.zhiright {
			width: 206rpx;
			height: 72rpx;
			// background: #2A7CFC;
			background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
			box-shadow: 2rpx 5rpx 9rpx 1rpx rgba(198, 174, 119, 0.2);
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: 0 20rpx;
		}
	}
}
}
</style>
